<template>
	<view style="padding: 0 10rpx;">
		<uni-section title="基础信息" type="line"></uni-section>
		<uni-forms style="width: 95%; margin: 10rpx auto;"
		ref="valiForm" 
		:rules="rules" 
		labelAlign="right" 
		:modelValue="valiFormData.project">
			<uni-forms-item label="名称:" required name="name">
				<uni-easyinput v-model="valiFormData.project.name" placeholder="请输入名称" :disabled="isEdit"/>
			</uni-forms-item>
			<uni-forms-item label="团队项目:">
				<uni-data-checkbox 
				v-model="valiFormData.project.teamStatus" 
				:localdata="isTeamProject" 
				@change="changeStatus"
				/>
			</uni-forms-item>
			<uni-forms-item label="团队:" v-if="valiFormData.project.teamStatus == 'TEAM'">
				<uni-data-picker 
				placeholder="请选择团队" 
				:localdata="team" 
				v-model="valiFormData.project.teamId" />
			</uni-forms-item>
			<uni-forms-item label="图片:">
				<robby-image-upload v-model="valiFormData.imageList" 
				@delete="deleteImage" 
				limit="1"
				@add="addImage"></robby-image-upload>
				<!-- <uni-file-picker 
				ref="files"
				limit="1" 
				title="工程图片"
				v-model="valiFormData.imageList"
				:image-styles="imgStyle"
				mode="grid"
				:auto-upload="true"></uni-file-picker> -->
				<!-- <button type="primary" @click="upLoad" size="mini" style="background-color: #007aff;">上传</button> -->
			</uni-forms-item>
			<uni-forms-item label="备注:">
				<uni-easyinput type="textarea" v-model="valiFormData.project.note" placeholder="请输入备注" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit" style="background-color: #007aff;">提交</button>
	</view>
</template>

<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	export default {
	    components: {robbyImageUpload},
		data() {
			return {
				isEdit: false,
				isClickUpload: false,
				team: [],
				isTeamProject: [{
					text: '是',
					value: 'TEAM'
				},{
					text: '否',
					value: 'NORMAL'
				}],
				valiFormData: {
					project:{
						id: '',
						name: '',
						teamStatus: 0,
						teamId: '',
						note: '',
						avatar:0,
						avatarUrl: ''
					},
					imageList: []
				},
				imageList: [],
				fileList: [],
				images: [],
				delId: [],
				fileIds: [],
				imgStyle: {
					"height": 100,   // 边框高度
					"width": 100,    // 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#eee",     // 边框颜色
						"width":"1px",      // 边框宽度
						"style":"solid",    // 边框样式
						// "radius":"50%"      // 边框圆角，支持百分比
					}
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '名称不能为空'
						}]
					},
				}
			}
		},
		onLoad() {
			this.getTeams();
			var data = uni.getStorageSync("project_data");
			uni.removeStorageSync("project_data");
			if(data){
				//console.log(data);
				this.isEdit = true;
				this.valiFormData.id = data.id;
				this.valiFormData.project.name = data.name;
				this.valiFormData.project.teamStatus = data.teamStatus;
				this.valiFormData.project.teamId = data.teamId;
				this.valiFormData.project.note = data.note;
				this.images.push({
					id : data.avatar,
					url: data.avatarUrl,
				});
				this.valiFormData.imageList.push(data.avatarUrl);
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.valiForm.setRules(this.rules)
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '大家都在用这款小工具管理项目，快来试试吧！！！',
		      path: '/pages/index/index'
		    }
		},
		methods: {
			async getTeams(){
				var list = await this.$dry.getTeams(true);
				var team = [];
				list.forEach(e => {
					team.push({
						text: e.name,
						value: e.id
					})
				})
				this.team = team;
			},
			addImage(e){
				this.imageList = this.imageList.concat(e.paths);
				this.fileList = this.fileList.concat(e.files);
			},
			deleteImage(e){
				this.images.forEach(i => {
					if(i.url == e.currentImage){
						this.delId.push(i.id);
					}
				})
				for(let i = 0; i < this.imageList.length; i++){
					if(e.currentImage == this.imageList[i]){
						this.imageList.splice(i,1);
						i--;
					}
				}
				for(let j = 0; j < this.fileList.length; j++){
					if(e.currentImage == this.fileList[j].path){
						this.fileList.splice(j,1);
						j--;
					}
				}
			},
			changeStatus(e) {
				if(e.detail.value == 'NORMAL') {
					this.valiFormData.project.teamId = '';
				}
			},
			upload(){
				this.$oss.upload("getProjectUploadData",this.fileList);
				// this.fileIds = this.$oss.fileIds;
				// this.isClickUpload =this.$oss.isClickUpload;
				
			},
			submit() {
				this.$refs['valiForm'].validate().then(async res => {
					var fileLists = [];
					if(this.fileList.length > 0) {
						fileLists = await this.$oss.saveImages(this.fileList);
					}
					var token = this.$dry.getToken();
					if(token){
						uni.showToast({
							title: "正在提交",
							icon: "loading",
							duration: 2000
						});
						setTimeout(() => {
							if(fileLists.length > 0) {
								this.isClickUpload = true;
							}
							var data = [];
							if(this.isEdit){
								this.valiFormData.project.avatar = this.isClickUpload == true ? fileLists[0].id : this.valiFormData.project.avatar;
								this.valiFormData.project.avatarUrl = this.isClickUpload == true ? fileLists[0].url : this.valiFormData.project.avatarUrl;
							}
							else{
								this.valiFormData.project.avatar = this.isClickUpload == true ? fileLists[0].id : 0;
								this.valiFormData.project.avatarUrl = this.isClickUpload == true ? fileLists[0].url : '';
							}
							if(this.isEdit) {
								this.$request.addOrEdit("updateProject",this.valiFormData.project,token,true);
							} else {
								this.$request.addOrEdit("addProject",this.valiFormData.project,token,false);
							}
							uni.switchTab({
								url: '../index/index'
							})
						}, 2000);
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			
		}
	}
</script>

<style scoped>
	
</style>
